<template>
  <div class="innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="modelForm"
        slot="adaption-bar"
        ref="formRef"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>
          <Form-item prop="applicationCode" label="应用">
            <Select filterable v-model="modelForm.applicationCode" placeholder="请选择应用" @on-change="appChange">
              <Option v-for="item in appList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          <!-- 员工编号 -->
          <Form-item prop="employeeNo" :label="$t('module.employee.employeeNo')">
            <Input
              type="text"
              :maxlength="30"
              v-model="modelForm.employeeNo"
              :placeholder="$t('module.employee.tip.empId')"
              
              @on-enter="searchHandler"
            ></Input>
          </Form-item>

          <!-- 姓名 -->
          <Form-item prop="name" :label="$t('module.employee.name')">
            <Input
              type="text"
              :maxlength="30"
              v-model="modelForm.name"
              :placeholder="$t('module.employee.tip.chnName')"
              
              @on-enter="searchHandler"
            ></Input>
          </Form-item>

          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="searchHandler" />
            <RPButton optType="reset" @click="resetHandler" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <div class="table-bar"><RPButton text="显示列" @click="showColumnsClick" /></div>
    <InnerPageTable ref="tableRef" :config="pageTableConfig"> </InnerPageTable>
  </div>
</template>

<script>
import locales from "../employee/locales";
import API from "@/api/employeeApiTwo";
import ShowColumns from "@/components/common/ShowColumns.vue";
import detail from "./detail.vue";
import { CoreModuleName } from "@/const";
export default {
  name: "employeeTwoIndex",
  components: {},
  props: {},
  mixins: [locales],
  data() {
    const { userInfo } = $store.state[CoreModuleName];
    return {
      currTenantCode: userInfo.tenantCode || "", //租户编码
      modelForm: {
        applicationCode: '',
      },
      pageTableConfig: {
        loadDataFn: this.getListPage,
        columns: [],
        autoFirst: false
      },
      appList: [],
      columnsList: [],
      showColKeyList: []
    };
  },
  created() {},
  mounted() {
    this.findApplicationPage();
  },
  methods: {
    appChange(val) {
      this.searchHandler();
    },
    getListPage: tableObj => {
      let { responseProcess, param } = tableObj;
      let { applicationCode, conditions, pageNum, pageSize, showColKeyList, tenantCode, that } = param;
      return API.getListPage({
        applicationCode,
        conditions,
        pageNum,
        pageSize,
        showColKeyList,
        tenantCode
      }).then(data => {
        console.log(data, "getListPage");
        if (data.code == 200) {
          let { colKeyList, colShowNameVoList } = data.data;
          let tableColumns = [];
          colShowNameVoList.forEach((item, index, arr) => {
            tableColumns.push({
              title: item.colName,
              key: item.colKey,
              minWidth: that.getColumnWidth(item.colName),
              tooltip: true
            });
          });
          let vm = that;
          tableColumns.push({
            title: vm.$t("common.operating"),
            align: "left",
            fixed: "right",
            width: 80,
            render: (h, { row }) => {
              return h("RowTools", {
                props: {
                  data: [
                    {
                      type: "icon",
                      icon: "ios-eye",
                      text: vm.$t("module.employee.catDetail"),
                      handle: () => vm.goDetail(row)
                    }
                  ]
                }
              });
            }
          });
          that.showColKeyList = colKeyList;
          tableObj.tableColumns = tableColumns;
          responseProcess(data.data);
        }
      });
    },
    goDetail(row) {
      new this.$pageModal(
        detail,
        {
          props: {
            row: {
              applicationCode: this.modelForm.applicationCode,
              dataRowId: row.emp_id,
              showColKeyList: this.showColKeyList,
              tenantCode: this.currTenantCode
            }
          }
        },
        () => {}
      );
    },
    getColumnWidth(name) {
      if (name.includes("日期")) {
        return 150;
      }
      if (name.length > 4) {
        return (name.length / 4) * 100;
      } else {
        return 100;
      }
    },
    searchHandler() {
      this.getTableList();
    },
    resetHandler() {
      this.modelForm = {
        ...this.modelForm,
        employeeNo: "",
        name: "",
        // applicationCode: this.appList.length ? this.appList[0].value : ""
      };
      this.getTableList();
    },
    async getFieldList() {
      if (!this.modelForm.applicationCode) {
        this.$message.error({
          content: "请选择应用",
          duration: 3
        });
        return false;
      }
      await API.getFieldList({
        tenantCode: this.currTenantCode,
        applicationCode: this.modelForm.applicationCode
      }).then(res => {
        if (res.code == 200) {
          this.columnsList = res.data || [];
        }
      });
      return true;
    },
    async showColumnsClick() {
      let res = await this.getFieldList();
      if (!res) return;
      new this.$pageModal(
        ShowColumns,
        {
          props: {
            list: this.columnsList,
            initColKeyList: this.showColKeyList
          }
        },
        data => {
          console.log(data, "data");
          if (data) {
            this.showColKeyList = data;
            this.getTableList();
          }
        }
      );
    },
    findApplicationPage() {
      API.findApplicationPage({
        commonPageDTO: { currentPage: 1, pageSize: 99999999, recordCount: 0 },
        sortDTO: { fieldName: "", orderBy: "" },
        pageNum: 1,
        pageSize: 99999999,
        clientId: "",
        appName: "",
        tenantCode: null,
        enabled: "", //"1",
        condition: { clientId: "", appName: "", tenantCode: null, enabled: "1" }
      }).then(data => {
        if (data && data.records) {
          API.getOpenMainAppList({
            tenantCode: this.currTenantCode
          }).then(openData => {
            console.log(openData, "openList");
            if (openData.code == 200) {
              let openListId = openData.data.map(item => item.applicationCode);
              this.appList = data.records
                .filter(item => openListId.includes(item.clientId))
                .map(item => {
                  return {
                    label: item.appName,
                    value: `${item.clientId}`
                  };
                });
              if (this.appList.length) {
                this.modelForm.applicationCode = this.appList[0].value;
                this.$nextTick(() => {
                  this.getTableList();
                });
              }
            }
          });
        }
      });
    },
    getTableList() {
      if (!this.modelForm.applicationCode) {
        this.$message.error({
          content: "请选择应用",
          duration: 3
        });
        return false;
      }
      let { applicationCode = "", employeeNo = "", name = "" } = this.modelForm;
      let param = {
        applicationCode, //---应用code---对应页面应用下拉框
        conditions: [
          {
            fieldKey: "chn_name", //-----员工姓名
            operate: "like", //---精确查询---eq--员工编号使用；模糊查询---like---员工姓名使用
            value: name //---客户输入的值
          },
          {
            fieldKey: "emp_id", //员工编号
            operate: "like", //
            value: employeeNo //---客户输入的值
          }
        ],
        showColKeyList: this.showColKeyList,
        tenantCode: this.currTenantCode,
        that: this
      };
      this.$refs["tableRef"].load(param);
    }
  },
  computed: {},
  watch: {
  }
};
</script>

<style lang='less' scoped >
.table-bar {
  display: flex;
  justify-content: flex-end;
}
</style>
